<template>
    <div class="home-container">
      <div class="common-layout">
        <el-container>
          <el-header>
            <div class="header-container">
              <el-text class="mx-1" style="color: #000000;display:block;" size="large">你好，{{userName}}</el-text>
              <el-divider />
              <div class="card-wrapper">
                <el-card class="card-box1">
                <div class="card-img">
                  <el-avatar :size="60" src="../../../src/assets/img/home/Integral.png">

                  </el-avatar>
                </div>
                  <div class="info-box">
                    <el-text class="mx-1" style="color: black">签到积分</el-text>
                    <div style="margin-top: 10px;color: black">
                      <el-text class="mx-1" style="font-size: 25px;color: #e5368e">{{ userIntegral }}</el-text>
                    </div>
                  </div>
                </el-card>
                <el-card class="card-box3">
                  <div class="card-img">
                    <el-avatar class="no-gray" :size="60" src="../../../src/assets/img/home/RemainingCount.png"/>
                  </div>
                  <div class="info-box">
                    <el-text class="mx-1" style="color: black">剩余调用次数</el-text>
                    <div style="margin-top: 10px;color: black">
                      <el-text class="mx-1" style="font-size: 25px;color: #e5368e">{{ userInvokeCount }}</el-text>
                    </div>
                  </div>
                </el-card>
                <el-card class="card-box4">
                  <div class="card-img">
                    <el-avatar  class="no-gray" :size="60" src="../../../src/assets/img/home/handleCount.png"/>
                  </div>
                  <div class="info-box">
                    <el-text class="mx-1" style="color: black">今日调用次数</el-text>
                    <div style="margin-top: 10px;color: black">
                      <el-text class="mx-1" style="font-size: 25px;color: #e5368e">{{currentDateInvokeCount}}</el-text>
                    </div>
                  </div>
                </el-card>
                <el-card class="card-box2">
                  <div class="card-img-qiandao">
                    <el-button type="primary" style="width: 80px;height: 80px" circle  @click="signIn()">点击签到</el-button>
                  </div>
                  <div class="info-box">
                    <div style="margin-top: 22px;color: black">
                      <el-text class="mx-1" style="font-size: 15px;color: #146bf3">签到积分+1</el-text>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </el-header>
          <el-main>
            <div class="main-container">
              <el-divider />
              <el-text class="mx-1" size="large" style="color: #000000;display:block;margin-top: -15px">最近分析频率</el-text>
<!--              <el-button>查看更多</el-button>-->
              <div class="chart-container" id="chart-main">

              </div>
            </div>
          </el-main>
          <el-footer>
            <div class="footer-container">

            </div>
          </el-footer>
        </el-container>
      </div>
    </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import * as echarts from 'echarts'
import myAxios from "../../../plugins/myAxios.js";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import {Edit} from "@element-plus/icons-vue";

const router = useRouter();
const description = "用户个人信息  +  签到信息 +  分析数据频率 + 文件列"
const state = reactive({
  option: {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      backgroundColor: '#fff', // 悬浮框背景色
      borderColor: '#000', // 悬浮框边框颜色
      borderWidth: 1, // 悬浮框边框宽度
      textStyle: { // 悬浮框文字样式
        color: '#000',
        fontSize: 12
      },
      feature:{
        dataView:{
          readOnly:false
        },
        dataZoom:{},
        magicType:{
          type: ['line','bar']
        },
        restore:{},
        saveAsImage:{}
      },
      show:true,
    },
    grid: {
      top: '4%',
      left: '2%',
      right: '4%',
      bottom: '5%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: ["2024/1/1","2024/2/2","2024/3/3","2024/4/4","2024/5/5","2024/6/6"],
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: '分析次数',
        type: 'line',
        smooth: true,
        barWidth: '40%',
        // areaStyle: {},
        emphasis:{
          label:{
            show:true
          }
        },
        data: [20,680,130,460,2,320],
      },
    ],
  },
});
const userName = ref('');
const userIntegral = ref(); //用户积分
const userInvokeCount = ref(); //用户剩下可调用次数
const currentDateInvokeCount = ref(); //用户分析次数
const isSignIn =ref(true); //是否已经签到过


const initeCharts = () => {
  let myChart = echarts.init(document.getElementById('chart-main'))
  // 绘制图表
  myChart.setOption(state.option)
}

onMounted(() => {
  getCurrentUser()
  getChartInfo();
  initeCharts()
})

/**
 * 签到
 * @returns {Promise<void>}
 */
const signIn = async  () => {
  console.log("签到----")
  if(!isSignIn.value){
    const res = await myAxios.post('/integral/signIn').catch(() => {
      ElMessage({
        type: 'error',
        message: '服务器内部错误',
      })
    });
    if(res.code  === 40100 && res.message === '未登录'){
      router.push({path: '/login', replace: true});
      ElMessage.error("用户未登录")
      return ;
    }
    if(res.code === 0){
      if(res.data === true){
        ElMessage.success("签到成功")
        new Promise(() => {
          getCurrentUser();
        })
      }else{
        ElMessage.success("不可重复签到")
      }
    }else{
      ElMessage.error(res.message);
    }
  }else{
    ElMessage.error("不可重复签到");
  }
}

const getChartInfo = async () => {
  const res = await myAxios.post('/chart/get/chartInfo').catch(() => {
    ElMessage({
      type: 'error',
      message: '服务器内部错误',
    })
  });
  console.log(res);
  if(res.code  === 40100 && res.message === '未登录'){
    router.push({path: '/login', replace: true});
    ElMessage.error("用户未登录")
    return ;
  }
  if(res.code === 0){
    let currentTimeList = res.data.currentTime;
    state.option.xAxis[0].data =  currentTimeList.map(date => formatDate(date));
    state.option.series[0].data =  res.data.callTimes;
    initeCharts()
  }else{
    ElMessage.error(res.message);
  }
}

const  formatDate = (date) => {
  if(date == null){
    return ;
  }
  const time = new Date(date);
  const year = time.getFullYear();
  const month = String(time.getMonth() + 1).padStart(2, '0');
  const day = String(time.getDate()).padStart(2, '0');
  return `${year}/${month}/${day}`;
}

const getCurrentUser =async () => {
  const res = await myAxios.get('/user/get/extendInfo').catch(() => {
    ElMessage({
      type: 'error',
      message: '服务器内部错误',
    })
  });
  if(res.code  === 40100 && res.message === '未登录'){
    router.push({path: '/login', replace: true});
    ElMessage.error("用户未登录")
    return ;
  }
  if(res.code === 0){
    console.log(res.data);
    userName.value =res.data.userName;
    userIntegral.value = res.data.integral;
    userInvokeCount.value = res.data.invokeCount;
    currentDateInvokeCount.value =res.data.currentDateInvokeCount;
    isSignIn.value = res.data.isSignIn;
  }else{
    ElMessage.error(res.message);
  }
}




</script>

<style scoped lang="less">
@import "../../../assets/css/common.less";
@import "//at.alicdn.com/t/c/font_4145508_zw64dsjcbs9.css";
.el-card {
  background-color: transparent; /* 设置背景色为透明 */
}

.home-container {
  //background: @EleColor;
  position: relative;
  z-index: 2; /* 确保父div位于子元素之上 */

  color: #000000;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  .header-container{
    width: 100%;
    height: 200px;
    margin: 0;
    //background: #8c939d;
    overflow: hidden;
    padding-top: 15px;
    .card-wrapper{
      margin-top: -50px;
      width: 100%;
      height: 200px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .card-box{
        width: 230px;
        height: 120px;
        //display: inline-block;
        padding: 0;
        .card-img{
          background-color: red;
          width: 100px;
          height: 100px;
          padding-top: 10px;
          .no-gray{
            background: transparent;
          }
        }
        .card-img-qiandao{
          //padding-top: 5px;
        }
        .info-box{
          padding: 0;
          margin-left:20px;
        }
      }
      .card-box2{
        width: 230px;
        height: 120px;
        position: absolute;
        right: 100px;
        //display: inline-block;
        padding: 0;
        .card-img{
          padding-top: 10px;
          .no-gray{
            background: transparent;
          }
        }
        .card-img-qiandao{
          //padding-top: 5px;
        }
        .info-box{
          padding: 0;
          margin-left:20px;
        }
      }
      .card-box1{
        width: 230px;
        height: 120px;
        position: absolute;
        left: 100px;
        //display: inline-block;
        padding: 0;
        .card-img{
          padding-top: 10px;
          .no-gray{
            background: transparent;
          }
        }
        .card-img-qiandao{
          //padding-top: 5px;
          .no-gray{
            background: transparent;
          }
        }
        .info-box{
          padding: 0;
          margin-left:20px;
        }
      }
      .card-box3{
        width: 230px;
        height: 120px;
        position: absolute;
        left: 430px;
        //display: inline-block;
        padding: 0;
        .card-img{
          padding-top: 10px;
          .no-gray{
            background: transparent;
          }
        }
        .card-img-qiandao{
          //padding-top: 5px;
        }
        .info-box{
          padding: 0;
          margin-left:20px;
        }
      }
      .card-box4{
        width: 230px;
        height: 120px;
        position: absolute;
        right: 440px;
        //display: inline-block;
        padding: 0;
        .card-img{
          padding-top: 10px;
          .no-gray{
            background: transparent;
          }
        }
        .card-img-qiandao{
          //padding-top: 5px;
        }
        .info-box{
          padding: 0;
          margin-left:20px;
        }
      }
    }
  }
  .main-container{
    width: 100%;
    height:500px;
    //background: #eaeaea;
    margin-top: 138px;
    padding: 0;
    .chart-container{
      width: 100%;
      height:450px;
      margin-top: 20px;
      //background: #8c939d;
    }
  }
}
.home-container:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../../../assets/img/appearance/bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.4;
  z-index: -1; /* 将伪元素放置父div下方 */
}
.el-card__body{
  padding: 0;
  display: flex;
}
</style>